<template>
  <div id="main" ref="main"></div>
</template>
<script>
import echarts from "echarts";
export default {
  mounted() {
    this.barChart();
  },
  methods: {
    barChart() {
      const myChart = echarts.init(this.$refs.main);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        legend: {
          data: ["设备台数", "4A使用率"]
        },
        xAxis: [
          {
            type: "category",
            data: ["MPS", "SOC", "博瑞的LTE", "彩信", "互联网OPI", "人流系统"],
            axisPointer: {
              type: "shadow"
            },
            axisLabel: {
              //底部文字倾斜
              interval: 0,
              rotate: 25
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            // name: "设备台数",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value}"
              //   formatter: "{value} ml"
            }
          },
          {
            type: "value",
            // name: "温度",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value}%"
            }
          }
        ],
        series: [
          {
            name: "设备台数",
            type: "bar",
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3
            ]
          },
          {
            name: "4A使用率",
            type: "line",
            yAxisIndex: 1,
            data: [
              2.0,
              2.2,
              3.3,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4,
              23.0,
              16.5,
              12.0,
              6.2
            ]
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style scoped>
#main {
  width: 100%;
  height: 100%;
}
</style>